<script>
export default {
    name: "ResumeAlbum"
}
</script>

<template>
    <div class="flex row" style="width: 100%;">
        <div class="flex column flex-end item-card" style="position: relative;height: 420px;">
            <img class="float-img" style="position: absolute" src="https://24819213.s61i.faiusr.com/4/AD0IjezqCxAEGAAgj836_AUohsyJ8wUw8gI47QI.png.webp" alt="img04">
            <div class="bottom-div" >
                ss
            </div>
        </div>
        <div class="flex column flex-end item-card" style="position: relative;height: 420px;">
            <img class="float-img" style="position: absolute" src="https://24819213.s61i.faiusr.com/4/AD0IjezqCxAEGAAgu8z6_AUonMq8lQcw8gI47QI.png.webp" alt="img04">
            <div class="bottom-div">
                ss
            </div>
        </div>
        <div class="flex column flex-end item-card" style="position: relative;height: 420px;">
            <img class="float-img" style="position: absolute" src="https://24819213.s61i.faiusr.com/4/AD0IjezqCxAEGAAg38v6_AUo8NC1uwcw8gI47QI.png.webp" alt="img04">
            <div class="bottom-div">
                ss
            </div>
        </div>
        <div class="flex column flex-end item-card" style="position: relative;height: 420px;">
            <img class="float-img" style="position: absolute" src="https://24819213.s61i.faiusr.com/4/AD0IjezqCxAEGAAggcn6_AUohuby6AMw8gI47QI.png.webp" alt="img04">
            <div class="bottom-div">
                ss
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.item-card{
    width: 300px;
    height: fit-content;
    transition: transform 0.5s,width 0.5s;
}
.item-card:hover{
    width: 330px;
    .float-img{
        transform: translateY(-50px);
        width: 330px;
        z-index: 1;
    }
    .bottom-div{
        width: 330px;
    }

}
.float-img{
    box-shadow:0 0 15px 0 rgba(0,0,0,.1);
    height: 365px;
    width: 300px;
    transition: transform 0.5s,width 0.5s;
}
.float-img:hover{
    transform: translateY(-50px);
    width: 330px;
    z-index: 1;
}
.bottom-div{
    height: 50px;width:300px;background: #626971;
    transition: width 0.5s;
}

</style>
